<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Live Form Validation Advanced Demo</title>
<link rel="stylesheet" type="text/css" href="../stylesheet/jquery.validate.css"/>
<link rel="stylesheet" type="text/css" href="../stylesheet/styleonlyforjqueryvalidateexample.css" />
<script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
<script src="../Scripts/jquery.validate.js" type="text/javascript"> </script>
<script src="../Scripts/jquery.validation.functions.js" type="text/javascript"> </script>

<script type="text/javascript">
            /* <![CDATA[ */
            jQuery(function(){
                jQuery("#ValidField").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });
                jQuery("#ValidNumber").validate({
                    expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
                    message: "Please enter a valid number"
                });
                jQuery("#ValidInteger").validate({
                    expression: "if (VAL.match(/^[0-9]*$/) && VAL) return true; else return false;",
                    message: "Please enter a valid integer"
                });
                jQuery("#ValidDate").validate({
                    expression: "if (!isValidDate(parseInt(VAL.split('-')[2]), parseInt(VAL.split('-')[0]), parseInt(VAL.split('-')[1]))) return false; else return true;",
                    message: "Please enter a valid Date"
                });
                jQuery("#ValidEmail").validate({
                    expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
                    message: "Please enter a valid Email ID"
                });
                jQuery("#ValidPassword").validate({
                    expression: "if (VAL.length > 5 && VAL) return true; else return false;",
                    message: "Please enter a valid Password"
                });
                jQuery("#ValidConfirmPassword").validate({
                    expression: "if ((VAL == jQuery('#ValidPassword').val()) && VAL) return true; else return false;",
                    message: "Confirm password field doesn't match the password field"
                });
                jQuery("#ValidSelection").validate({
                    expression: "if (VAL != '0') return true; else return false;",
                    message: "Please make a selection"
                });
                jQuery("#ValidMultiSelection").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please make a selection"
                });
                jQuery("#ValidRadio").validate({
                    expression: "if (isChecked(SelfID)) return true; else return false;",
                    message: "Please select a radio button"
                });
                jQuery("#ValidCheckbox").validate({
                    expression: "if (isChecked(SelfID)) return true; else return false;",
                    message: "Please check atleast one checkbox"
                });
				jQuery('.AdvancedForm').validated(function(){
					alert("Use this call to make AJAX submissions.");
				});
            });
            /* ]]> */
        </script>
</head>
<body>
<div class="TabBody">
  <h1>jQuery Live Form Validation Advanced Demo</h1>
  <form action="" method="post" class="AdvancedForm">
    <table cellpadding="3" cellspacing="2">
      <tr>
        <td> Enter a Required Field </td>
        <td><input type="text" name="ValidField" id="ValidField" />
        </td>
      </tr>
      <tr>
        <td> Enter a Number </td>
        <td><input type="text" name="ValidNumber" id="ValidNumber" />
        </td>
      </tr>
      <tr>
        <td> Enter an Integer </td>
        <td><input type="text" name="ValidInteger" id="ValidInteger" />
        </td>
      </tr>
      <tr>
        <td> Enter a Date (MM-DD-YYYY) </td>
        <td><input type="text" name="ValidDate" id="ValidDate" />
        </td>
      </tr>
      <tr>
        <td> Enter Email ID </td>
        <td><input type="text" name="ValidEmail" id="ValidEmail" />
        </td>
      </tr>
      <tr>
        <td> Password </td>
        <td><input type="password" name="ValidPassword" id="ValidPassword" />
        </td>
      </tr>
      <tr>
        <td> Confirm Password </td>
        <td><input type="password" name="ValidConfirmPassword" id="ValidConfirmPassword" />
        </td>
      </tr>
      <tr>
        <td> Make a selection </td>
        <td><select name="ValidSelection" id="ValidSelection">
            <option value="0">Make a Selection</option>
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
            <option value="Option 3">Option 3</option>
            <option value="Option 4">Option 4</option>
          </select>
        </td>
      </tr>
      <tr>
        <td> Make a multi-selection </td>
        <td><select name="ValidMultiSelection" id="ValidMultiSelection" multiple="multiple">
            <option value="Option 1">Option 1</option>
            <option value="Option 2">Option 2</option>
            <option value="Option 3">Option 3</option>
            <option value="Option 4">Option 4</option>
          </select>
        </td>
      </tr>
      <tr>
        <td> Select a Radio Button </td>
        <td><span id="ValidRadio" class="InputGroup">
          <label for="ValidRadio_1">
          <input type="radio" name="ValidRadio" id="ValidRadio_1" value="1" />
          Radio Button 1 </label>
          <br/>
          <label for="ValidRadio_2">
          <input type="radio" name="ValidRadio" id="ValidRadio_2" value="2" />
          Radio Button 2 </label>
          <br/>
          <label for="ValidRadio_3">
          <input type="radio" name="ValidRadio" id="ValidRadio_3" value="3" />
          Radio Button 3 </label>
          <br/>
          <label for="ValidRadio_4">
          <input type="radio" name="ValidRadio" id="ValidRadio_4" value="4" />
          Radio Button 4 </label>
          </span> </td>
      </tr>
      <tr>
        <td> Select a Checkbox Button </td>
        <td><span id="ValidCheckbox" class="InputGroup">
          <label for="ValidCheckbox_1">
          <input type="checkbox" name="ValidCheckbox" id="ValidCheckbox_1" value="1" />
          Checkbox 1 </label>
          <br/>
          <label for="ValidCheckbox_2">
          <input type="checkbox" name="ValidCheckbox" id="ValidCheckbox_2" value="2" />
          Checkbox 2 </label>
          <br/>
          <label for="ValidCheckbox_3">
          <input type="checkbox" name="ValidCheckbox" id="ValidCheckbox_3" value="3" />
          Checkbox 3 </label>
          <br/>
          <label for="ValidCheckbox_4">
          <input type="checkbox" name="ValidCheckbox" id="ValidCheckbox_4" value="4" />
          Checkbox 4 </label>
          <br/>
          </span> </td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Submit" id="FormSubmit" style="background: #EFEFEF;"/>
        </td>
      </tr>
    </table>
  </form>

</div>
</body>
</html>
